import React from "react";
import { useLocation, useNavigate } from "react-router-dom";
import { NavBar, CapsuleTabs, List, Button,Toast } from "antd-mobile";
import { CouponOutline } from "antd-mobile-icons";
import styles from "./index.module.css";

const Detail = () => {
  const navigate = useNavigate();
  const item =  JSON.parse(localStorage.getItem('detail'))
  const handleOrder=()=>{
    const token=localStorage.getItem('token')
    if(!token){
      Toast.show({
        icon:'fail',
        content:'请先登录'
      })
      navigate('/login?from=detail')
    }else{
      Toast.show({
        icon:'success',
        content:'下单成功'
      })
    }
  }
  return (
    <div>
      <NavBar onBack={() => navigate(-1)}>{item.time}</NavBar>
      <div className={styles.searchLeftTop}>
        <p className={styles.searchP}>
          <span>{item.dst}</span>
          <span>{item.dasn}</span>
        </p>
        <p className={styles.searchP}>
          <span style={{ fontWeight: "normal", fontSize: "12px" }}>
            {item.amn}
          </span>
          <span style={{ fontWeight: "normal", fontSize: "12px" }}>
            -------------
          </span>
        </p>
        <p className={styles.searchP}>
          <span>{item.ast}</span>
          <span>{item.aasn}</span>
        </p>
      </div>
      <CapsuleTabs>
        <CapsuleTabs.Tab
          title={
            <div>
              <p>二等座</p>
              <p>￥89.5</p>
              <p>有票</p>
            </div>
          }
          key={199}
        >
          <List>
            <List.Item
              key={100}
              prefix={<CouponOutline />}
              description={"同城保障出行,火车票￥89.5"}
              extra={
                <Button type="primary" color="success" onClick={handleOrder}>
                  预订
                </Button>
              }
            >
              {"优享购票"}
            </List.Item>
            <List.Item
              key={1121}
              prefix={<CouponOutline />}
              description={"无需手机号验证，火车票￥89.5"}
              extra={
                <Button type="primary" color="success" onClick={handleOrder}>
                  预订
                </Button>
              }
            >
              {"便携购票"}
            </List.Item>
            <List.Item
              key={1122}
              prefix={<CouponOutline />}
              description={"12306支持"}
              extra={
                <Button type="primary" color="success" onClick={handleOrder}>
                  预订
                </Button>
              }
            >
              {"12306购票"}
            </List.Item>
          </List>
        </CapsuleTabs.Tab>
        <CapsuleTabs.Tab
          title={
            <div>
              <p>一等座</p>
              <p>￥144.5</p>
              <p>有票</p>
            </div>
          }
          key={2123}
        >
         <List>
            <List.Item
              key={11}
              prefix={<CouponOutline />}
              description={"同城保障出行,火车票￥144.5"}
              extra={
                <Button type="primary" color="success" onClick={handleOrder}>
                  预订
                </Button>
              }
            >
              {"优享购票"}
            </List.Item>
            <List.Item
              key={22}
              prefix={<CouponOutline />}
              description={"无需手机号验证，火车票￥144.5"}
              extra={
                <Button type="primary" color="success" onClick={handleOrder}>
                  预订
                </Button>
              }
            >
              {"便携购票"}
            </List.Item>
            <List.Item
              key={33}
              prefix={<CouponOutline />}
              description={"12306支持"}
              extra={
                <Button type="primary" color="success" onClick={handleOrder}>
                  预订
                </Button>
              }
            >
              {"12306购票"}
            </List.Item>
          </List>
        </CapsuleTabs.Tab>
        <CapsuleTabs.Tab
          title={
            <div>
              <p>无座</p>
              <p>￥89.5</p>
              <p>有票</p>
            </div>
          }
          key={44}
        >
         <List>
            <List.Item
              key={166}
              prefix={<CouponOutline />}
              description={"同城保障出行,火车票￥89.5"}
              extra={
                <Button type="primary" color="success" onClick={handleOrder}>
                  预订
                </Button>
              }
            >
              {"优享购票"}
            </List.Item>
            <List.Item
              key={177}
              prefix={<CouponOutline />}
              description={"无需手机号验证，火车票￥89.5"}
              extra={
                <Button type="primary" color="success" onClick={handleOrder}>
                  预订
                </Button>
              }
            >
              {"便携购票"}
            </List.Item>
            <List.Item
              key={188}
              prefix={<CouponOutline />}
              description={"12306支持"}
              extra={
                <Button type="primary" color="success" onClick={handleOrder}>
                  预订
                </Button>
              }
            >
              {"12306购票"}
            </List.Item>
          </List>
        </CapsuleTabs.Tab>
      </CapsuleTabs>
    </div>
  );
};

export default Detail;
